<template>
  <div>
    <header>
      <div @click="load_user_gps" class="nav-item" :class="gps_type=='user'?'border-0 border-b-4 border-solid border-yellow-400':''">
      <image
            src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/location.jpg"
            mode="scaleToFill"
        />
        <span>离我近</span>
      </div>


      <div @click="load_user_address" class="nav-item"
           :class="gps_type=='user_address'?'border-0 border-b-4 border-solid border-yellow-400':''">
        <image
            src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/location.jpg"
            mode="scaleToFill"
        />
        <span>距家近</span>
      </div>



      <div @click="load_map_gps" class="nav-item" :class="gps_type=='address'?'border-0 border-b-4 border-solid border-yellow-400':''">
        <image
          src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/location.jpg"
          mode="scaleToFill"
        />
        <span>{{ gps_address }}</span>
      </div>
    </header>

    <div class="rider-list">

      <div class="list-item" @click="toChatDetail(item.uni_app_uni_id)" v-for="(item,index) in runner_list" :key="index">
        <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/logo.jpg" mode="scaleToFill" />
        <div class="content">
          <div class="content-top">
            <div class="name">{{ item.name }}</div>
            <div class="time">{{ item.gps_time_str }}</div>
          </div>
          <div class="content-bottom">
            <div class="address">
              <!--1在岗，2休息-->
              <text v-if="item.status==1">当前状态: 在线接单中</text>
              <text v-if="item.status==2">当前状态: 休息</text>
            </div>
            <div class="length">{{ item.distance_str }}</div>
          </div>
        </div>
        <image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/tochat.png" mode="scaleToFill" />
      </div>


      <u-loadmore fontSize="'14px'" height="'50px'" :dashed="false" :line="true" :status="loadmore_status" />
    </div>
  </div>
</template>

<script>
var app = getApp();
export default {
  components: {},
  data() {
    return {
      runner_near_count:0,
      gps_type: 'user',
      gps_address: '自定义位置',

      runner_list: [],
      loadmore_status:'loadmore',
      query:{
        longitude:0,
        latitude:0,
        page:1,
        pagesize:5
      },
    }
  },
  computed: {},

  watch: {
    //query对象
    query: {
      handler: function (newVal, oldVal) {
        this.query.page = 1;
        //防抖,无论触发多少次,只执行最后一次  单位ms
        uni.$u.debounce(this.load_service_list, 200)
      },
      deep: true
    },
  },
  async mounted() {
    this.runner_near_count=uni.getStorageSync("runner_near_count");
    // await this.load_runner_top_near_distance()
    await this.load_user_gps();
  },
  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  async onShow() {
    this.query.page = 1;
    this.load_service_list();
  },
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户上拉触底
  onReachBottom() {},
  methods: {
    async load_runner_top_near_distance() {

      await uni.getLocation({
        type: 'gcj02',
        success:  (res) => {

          app.globalData.util.request({
            url: 'entry/wxapp/runner_near_info',
            cachetime: '0',
            method: 'post',
            data: {
              longitude: res.longitude,
              latitude: res.latitude
            },
            success: (t)=> {
              uni.setStorageSync("runner_near_count", t.data.data.runner_near_count);
              this.runner_near_count=t.data.data.runner_near_count
            }
          })

        },
        fail: (res) => {
          this.runner_near_count="0"
        }
      });

    },

    async load_user_address() {
      // 获取当前账号的默认收货地址
      var user_id = uni.getStorageSync('users').id
      await app.globalData.util.request({
        url: 'entry/wxapp/MyDefaultAddress',
        cachetime: '0',
        method: 'post',
        data: {
          user_id: user_id
        },
        success: (res) => {
          if (res.data) {
            this.gps_type = 'user_address';
            this.query.page = 1;
            this.query.longitude = res.data.lng;
            this.query.latitude = res.data.lat;
            uni.showToast({
              title: '距默认收货地址最近!',
              icon: 'none'
            })
          }else{
            uni.showToast({
              title: '可能未设置默认收货地址!',
              icon: 'none'
            })
          }
        }
      });
    },
    async load_user_gps() {
      await uni.getLocation({
        type: 'gcj02',
        success:  (res) => {
          this.gps_type = 'user';
          this.query.page = 1;
          this.query.longitude = res.longitude;
          this.query.latitude = res.latitude;
        }
      });
    },
    async load_map_gps() {
      //使用地图选择功能,选择一个坐标
      await uni.chooseLocation({
        success: (res) => {
          console.log("选择的坐标",res)
          this.gps_type = 'address';
          this.gps_address = res.name;
          this.query.page = 1;
          this.query.longitude = res.longitude;
          this.query.latitude = res.latitude;
        }
      });
    },
    load_service_list() {
      app.globalData.util.request({
        url: 'entry/wxapp/runner_near_list',
        data: {
          ...this.query
        },
        cachetime: 0,
        success: res => {
          this.runner_list = res.data.data
        }
      })
    },
    toChatDetail(uni_user_id) {
      uni.navigateTo({
        url: '/ymq_canyino2o/pages/dyIm/chat/chat?user_id=' + uni_user_id
      });
    }
  }
}
</script>

<style scoped>
header {
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.5%;
  background: #fff;
}
header image {
  width: 50rpx;
  height: 50rpx;
}
header .nav-item {
  display: flex;
  align-items: center;
}


.rider-list {
  margin: 10rpx 20rpx;
  display: flex;
  flex-direction: column;
}
.rider-list image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.rider-list .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  border-radius: 20rpx;
  margin: 10rpx 0;
  background: #fff;
  border-radius: 20rpx;
}
.rider-list .list-item .content {
  flex: 1;
  margin-right: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rider-list .list-item .content .content-top,
.rider-list .list-item .content .content-bottom {
  display: flex;
  justify-content: space-between;
}
</style>
